<template>
  <view>
    <view class="top">

      <view :style="{paddingTop: vuex_custom_bar_height + 'px'}" />

<!--      <view class="u-flex setting" @click="tn('/pages_sub/setting/setting')">-->
<!--        <image src="/static/images/my/setting.png" style="height: 18px;width: 22px;"/>-->
<!--      </view>-->
      <view class="u-flex setting" >
        <u-button open-type="contact" shape="circle" :custom-style="{backgroundColor:'transparent',border:'0px',height: '18px',width:' 22px'}">
          <text class="tn-text-lg tn-icon-service-fill tn-color-gray"/>
        </u-button>
      </view>
      <top-user-info/>


      <!--  会员  -->
      <view class="tn-padding-xs">
        <view class="vip-box">
          <image src="/static/images/my/vip-bg.png" class="background"/>
          <view class="vip">
            <view class="tn-text-xxl" style="color: #FCD586">VIP会员</view>
            <view class="tn-text-sm" style="color: #FA9E8C;padding-top: 10px;" v-if="info.isVip">已开通,VIP到期时间:{{info.plus_expire_time*1000|formatDate}}</view>
            <view class="tn-text-sm" style="color: #FA9E8C;padding-top: 10px;" v-else>成功会员，全站影片免费看</view>
            <view class="add-vip">
              <view class="dm-button-sm" @click="tn('/pages_sub/recharge/recharge')" style="background: linear-gradient(90deg, #FFF8EA 10%, #C8A39C 100%);color: #523526;margin-left: 5px">{{ info.isVip?'立即续费':'加入会员' }}</view>
            </view>
          </view>
          <view class="bean">
            <view class="left">
              <view class="bag-box">
                <image class="bag" src="/static/images/my/bag.svg"/>
              </view>
              <view class="bean-text"><text class="tn-text-sm">金豆</text></view>
              <view class="dm-main-text-color tn-text-bold tn-text-xxl">{{ info.balanceTotal }}</view>
              <view class="tip dm-color-gray tn-text-sm">海量金豆免费送 <text class="dm-main-text-color" @click="tn('/pages_sub/signin/signin')">立即获取</text></view>
            </view>
            <view class="right">
              <view class="tn-flex tn-flex-direction-row">
                <view class="dm-button-sm" @click="tn('/pages_sub/recharge/recharge')">充值</view>
                <view class="dm-button-sm" @click="tn('/pages_sub/myrecharge/myrecharge')" style="background: linear-gradient(90deg, #3D3D3D 10%, #898989 100%);color: #FFFFFF;margin-left: 5px">充值记录</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 观看历史    -->
    <view class="tn-bg-white tn-padding dm-box-shadow tn-margin-bottom">
      <view class="tn-flex tn-flex-row-between tn-flex-col-center">
        <view class="tn-text-xl tn-text-bold">观看历史</view>
        <view class="tn-text-sm tn-color-gray" @click="toMore">更多<text class="tn-icon-right tn-color-gray"/></view>
      </view>
      <view class="tn-margin-top" v-if="historyList&&historyList.length>0">
        <tn-scroll-list :indicator="false">
          <block v-for="(item, index) in historyList" :key="index" >
            <view class="dm-margin-left-right-xs" style="max-width: 60px" @click="toVideoDetail(item)">
              <view><image :src="item.tv_image|handlePic" class="dm-tv-image-sm"/></view>
              <view class="tn-text-xs tn-text-bold tn-text-ellipsis">{{item.tv_name}}</view>
            </view>
          </block>
        </tn-scroll-list>
      </view>
    </view>

    <!-- 图标   -->
    <view class="dm-box" v-if="baseList&&baseList.length>0">
      <view v-for="(item,index) in baseList" :key="index">
        <view class="tn-flex tn-flex-row-between dm-margin-top-bottom" @click="tn(item.url)">
          <view class="tn-flex">
            <view class="tn-flex dm-margin-left-right"><image :src="item.icon|handlePic" style="height: 17px;width: 23px"/></view>
            <view class="tn-flex tn-text-sm">{{item.name}}</view>
          </view>
          <view class="tn-flex "><text class="tn-icon-right tn-text-bold tn-color-gray"/></view>
        </view>
      </view>
    </view>

	<view class="tn-flex tn-margin tn-flex-row-center tn-color-gray"><text class="tn-text-bold tn-text-md tn-icon-email"/>客服邮箱：service@hainansouyi.net</view>
    <view class="tn-flex tn-margin tn-flex-row-center tn-color-gray"><text class="tn-text-bold tn-text-md tn-icon-tel"/>客服电话：18501589921</view>

    <u-gap height="60"></u-gap>
  </view>
</template>

<script>
import common_mixin from '@/libs/mixin/common_mixin.js'
import TopUserInfo from "../../../components/top-user-info/top-user-info.vue";

export default {
  mixins: [common_mixin],
  components: {
    TopUserInfo
  },
  data() {
    return {
      sessionKey: "",
      encryptedKey: "",
      info: {
        avatar: '/static/images/avatar.png',
        nickname: "匿名用户",
        balanceTotal: 0,
        mobile: "",
        isVip:false,
        vipExpireTime:''
      },
      baseList: [],
      historyList:[]
    }
  },
  onLoad() {

  },
  onShow() {
    this.getUcenterIcons()
    this.getHistoryList();
    this.initUserData();
  },
  methods: {
    toMore() {
      var url  = '/pages/tabbar/watching/watching?tabIndex=1';
      uni.reLaunch({
        url: url
      })
    },
    async getUcenterIcons() {
      let data = await this.$api.getUCenterIcons({})
      this.baseList = data.ucenterIcons
    },
    async getHistoryList() {
      let data = await this.$api.getHistoryList({page:1})
      this.historyList = data.data;
    },
    initUserData(){
      let userInfo = this.vuex_user
      this.info = userInfo
      //有赠送金豆
      this.info.balanceTotal = this.getTotalBalance()
      this.info.isVip = this.checkVip()
    },
    getUsername() {
      this.tn("/pages_sub/setUserinfo/setUserinfo");
    },
    support() {
      uni.makePhoneCall({
        phoneNumber: "15717117711"
      })
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #f7f8fa;
}
.vip-box{
  position: relative;
  height: 210px;
  width: 100%;
  //background-image: url('@/static/images/my/vip-bg.png');
  //background-repeat: no-repeat;
  //background-size: 100% auto;
  //background-position: 0 100%;
  .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .vip{
    position: relative;
    width: 100%;
    top: 30px;
    left: 35px;
    .add-vip{
      position: absolute;
      top: 7px;
      right: 55px;
    }
  }
  .bean{
    position: relative;
    .left{
      position: absolute;
      top: 47px;
      left: 35px;
      .bag-box{
        right: 15px;
        top: 11px;
        position: relative;
        .bag{
          height: 35px;
          width: 43px;
        }
      }
      .bean-text{
        position: absolute;
        top: 24px;
        left: 24px;
      }
    }
    .right{
      position: absolute;
      top: 100px;
      right: 25px;
    }
  }
}


.top {
  background: linear-gradient(180deg, #FFDFE8 0%, rgba(255, 204, 218, 0) 30%);
}

.bindtext {
  background-color: #984346;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 20rpx;
}

.bindtext1 {
  color: #fff;
  font-size: 26rpx;
}


.admin_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
}

.avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 80rpx;
}

.flex_nickname {
  display: flex;
  align-items: center;
  width: 380rpx;
}

.nickname {
  color: #fff;
  font-size: 34rpx;
  margin: 0 12rpx 8rpx 20rpx;
  letter-spacing: 2rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.dou1 {
  color: #fff4e3;
  font-size: 24rpx;
  margin: 0 0 0 20rpx;
}

.recharge {
  color: #fff;
  background-color: #f6c343;
  padding: 10rpx;
  border-radius: 100rpx;
  border: 4rpx solid #f29900;
  width: 160rpx;
  text-align: center;
  letter-spacing: 2rpx;
  height: 43rpx;
  font-size: 30rpx;
}

.member {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #c3c2be;
  border-radius: 30rpx 30rpx 0 0;
  margin: 20rpx 30rpx 0 30rpx;
  padding: 20rpx;
}

.member_text {
  margin: 0 40rpx 0 20rpx;
  font-size: 32rpx;
  font-weight: 600;
  letter-spacing: 2rpx;
}

.setting {
  top: 120px;
  right: 20px;
  position: absolute;
}
</style>
